<template>
	<view class="order_detail_page">
		<view class="detail_content">
			<statusDomVue v-if="info.status >= 0 && info.is_service == 0" :info="info"></statusDomVue>

			<view class="order_status_box" v-if="info.is_service == 2">
				<view class="status_text">
					退款成功
					<!-- <image class="right_icon" :src="$img_path('/course/icon/right_icon.png')" mode=""></image> -->
				</view>
				<view class="status_remark_box">
					<text class="status_remark_text">
						{{
              $dayjs.unix(return_info.updatetime).format("YYYY-MM-DD HH:mm:ss")
            }}
					</text>
				</view>
			</view>
			<!-- 退款 -->
			<view v-if="info.is_service != 0">
				<view class="order_item_box" v-if="return_info.state == 0 || return_info.state == -1">
					<view class="refund_title">
						{{
              return_info.state == 0 ? "退款申请待平台处理" : "平台拒绝退款申请"
            }}
					</view>
					<view class="refund_remark">
						{{
              return_info.state == 0
                ? "你已经发起退款申请，平台将在5分钟内处理"
                : "请在35小时59分内响应"
            }}
					</view>
					<view class="refund_step">
						<c-step-bar :list="stepList" :curStep="return_info.state == 0 ? 2 : 1"></c-step-bar>
					</view>
				</view>

				<view class="order_item_box" v-if="return_info.state == 1">
					<view class="refund_title display-flex alig space-between">
						退款金额：
						<text
							style="font-weight: 900; font-size: 34rpx; color: #ff2e2e">¥{{ return_info.refund_price }}</text>
					</view>
					<view class="refund_step">
						<c-step-bar :list="stepList2" :curStep="return_info.state"></c-step-bar>
					</view>
				</view>

				<view class="order_item_box" v-if="return_info.state == -1">
					<view class="refund_title"> 拒绝原因 </view>
					<view class="refund_price" style="text-align: justify">
						{{ return_info.note }}
					</view>
				</view>

				<view class="order_item_box">
					<view class="refund_title"> 退款信息 </view>
					<view class="refund_price">
						<view class="refund_price_title">退款原因</view>
						<view>{{ return_info.refund_reason }}</view>
					</view>
					<view class="refund_price">
						<view class="refund_price_title">退款金额</view>
						<view>¥ {{ return_info.refund_price }}</view>
					</view>
				</view>
			</view>
			<!-- 退款凭证 -->
			<view class="order_item_box" v-if="info.is_service != 0">
				<view class="refund_title"> 凭证描述 </view>
				<view class="proof_image_box" v-if="return_info.images">
					<image v-for="item in return_info.images.split(',')" class="proof_image" :src="$img_base_url(item)"
						mode="aspectFill"></image>
				</view>
				<view class="refund_price" style="text-align: justify">
					{{ return_info.content }}
				</view>
			</view>

			<view class="order_item_box call_address_box"
				v-if="info.status > 1 && info.goods_type == 1 && info.detail.is_yh == 1">
				<view class="refund_title flex_ac">
					<view class="solid_h"></view>
					<view>服务人员</view>
				</view>
				<view class="flex_ac service_user">
					<image class="service_user_image" :src="$img_base_url(info.skillInfo.image)" mode="aspectFill">
					</image>
					<view class="service_user_content">
						<view class="service_user_name">{{ info.skillInfo.name }} 为您服务</view>
						<!-- <view class="service_user_score_box">
							服务评分：
							<text class="service_user_score">95.0</text>
						</view> -->
					</view>
				</view>
			</view>

			<view class="order_item_box" v-if="info.status > 3">
				<view class="refund_title flex_ac">
					<view class="solid_h"></view>
					<view>服务上传</view>
				</view>
				<view>
					<view class="service_upload_wz"> 到达 </view>
					<view>
						<view class="proof_image_box service_upload_img_box">
							<image v-for="item in 5" class="proof_image service_upload_img"
								:src="$img_path('/course/uni.png')" mode="">
							</image>
						</view>
						<view class="service_upload_time">
							<text class="service_upload_wz">上传时间</text>：2024-05-20 21:30
						</view>
					</view>
				</view>

				<view v-if="info.status > 4">
					<view class="service_upload_wz"> 服务前： </view>
					<view>
						<view class="proof_image_box service_upload_img_box">
							<image v-for="item in 3" class="proof_image service_upload_img"
								:src="$img_path('/course/uni.png')" mode="">
							</image>
						</view>
						<view class="service_upload_time">
							<text class="service_upload_wz">上传时间</text>：2024-05-20 21:30
						</view>
					</view>
				</view>

				<view v-if="info.status > 4">
					<view class="service_upload_wz"> 服务后： </view>
					<view>
						<view class="proof_image_box service_upload_img_box">
							<image v-for="item in 4" class="proof_image service_upload_img"
								:src="$img_path('/course/uni.png')" mode="">
							</image>
						</view>
						<view class="service_upload_time">
							<text class="service_upload_wz">上传时间</text>：2024-05-20 21:30
						</view>
					</view>
				</view>
			</view>

			<view class="order_item_box call_address_box" v-if="info.orderAddress">
				<view class="call_address">
					<text>{{ info.orderAddress.province }}</text>
					<text>{{ info.orderAddress.city }}</text>
					<text>{{ info.orderAddress.district }}</text>
					<!-- <text>{{info.orderAddress.province}}</text> -->
				</view>
				<view class="call_deatil_address">{{ info.orderAddress.address }}</view>
				<view class="call_user">
					<text>{{ info.orderAddress.name
            }}{{
              info.orderAddress.sex == 1
                ? "（先生）"
                : info.orderAddress.sex == 2
                ? "（女士）"
                : ""
            }}</text>
					<text>{{ info.orderAddress.mobile }}</text>
				</view>
				<view class="call_time" v-if="
            (info.starttime || info.detail.service_time_json) &&
            info.goods_type != 2
          ">
					上门时间：{{
            info.goods_type == 1 && info.is_wt == 0
              ? timejson()
              :new Date(info.starttime * 1000).toLocaleString().replace(/\//g, '-').replace(/:/g, ':') 
          }}
				</view>
			</view>

			<template v-if="info.is_service != 0">
				<view class="order_item_box call_address_box" v-if="
          info.is_wt == 0 &&
          info.status >= 0 &&
          (info.goods_type == 0 ||
            (info.goods_type == 1 && info.detail.is_yh == 1))
        ">
					<view class="refund_title"> 被服务者信息 </view>
					<view class="call_address" style="margin-top: 10rpx">
						<text>{{ info.detail.bfw_name }}</text>
						<text>{{
            info.detail.bfw_sex == 1
              ? "男"
              : info.detail.bfw_sex == 2
              ? "女"
              : "未知"
          }}</text>
						<!-- <text>45</text> -->
						<!-- <text>本人</text> -->
					</view>
					<view class="call_user">
						<text>{{ info.detail.bfw_mobile }}</text>
					</view>
				</view>
			</template>

			<view class="order_item_box detail_sex" v-if="info.status >= 0 && info.goods_type == 0">
				<view>性别</view>
				<view>{{ info.sex == 2 ? "女" : info.sex == 1 ? "男" : "不限" }}</view>
			</view>

			<view class="order_item_box flex_ac_jsb">
				<image class="service_image" :src="$img_base_url(info.detail.image)" mode="widthFix"></image>
				<view class="service_content">
					<view class="service_top flex_ac_jsb">
						<view class="service_top_name">{{ info.detail.name }}</view>
						<view class="service_top_price_box">
							<text class="service_top_price_icon">￥</text>
							<text class="service_top_price">{{ info.detail.price }}</text>
						</view>
					</view>
					<view class="service_bottom flex_ac_jsb">
						<view class="service_bottom_name" v-if="info.detail.sku">规格名称规格名称</view>
						<view class="service_bottom_num"> x {{ info.detail.num }} </view>
					</view>
				</view>
			</view>

			<view class="order_item_box">
				<view class="flex_ac_jsb service_item">
					<view class="service_item_name">服务金额</view>
					<view class="service_item_price">￥{{ info.goods_total_price }}</view>
				</view>
				<view class="flex_ac_jsb service_item">
					<view class="service_item_name">夜间费</view>
					<view class="service_item_price">￥{{ info.night_money }}</view>
				</view>
				<view class="flex_ac_jsb service_item">
					<view class="service_item_name">优惠券</view>
					<view class="service_item_price">-￥{{ info.coupon_price }}</view>
				</view>
				<view class="flex_ac_jsb service_item">
					<view class="service_item_name">需付款</view>
					<view class="service_item_price">￥{{ info.payprice }}</view>
				</view>
			</view>

			<view class="order_item_box detail_sex" v-if="
          info.detail.case &&
          ((info.detail.is_yh == 1 && info.goods_type == 1) ||
            info.goods_type == 0)
        ">
				<view>疾病</view>
				<view>{{ info.detail.case }}</view>
			</view>

			<view class="order_item_box detail_sex" v-if="
          info.detail.is_yh_tools == 1 &&
          info.detail.is_yh == 1 &&
          ((info.detail.is_yh == 1 && info.goods_type == 1) ||
            info.goods_type == 0)
        ">
				<view v-for="(item, index) in info.goodsadd" :key="index">{{ item.name }}</view>
			</view>
			<template v-if="info.detail.gm_text">
				<view class="order_item_box detail_sex"
					style="display: flex; flex-direction: column; align-items: flex-start" v-if="
          (info.is_wt == 0 && info.detail.is_yh == 1 && info.goods_type == 1) ||
          info.goods_type == 0
        ">
					<view>{{ info.detail.is_gm == 1 ? "有过敏史" : "无过敏史" }}</view>
					<view v-if="info.detail.is_gm == 1 && info.detail.gm_text"
						style="color: #333333; font-size: 30rpx; margin-top: 12rpx">{{ info.detail.gm_text }}</view>
				</view>
			</template>

			<view class="order_item_box call_address_box" v-if="
          info.detail.cf_images &&
          info.detail.yp_images &&
          info.detail.is_yh == 1
        ">
				<view class="refund_title flex_ac">
					<view class="solid_h"></view>
					<view>就医证明</view>
				</view>
				<view class="flex_ac_jsa">
					<image class="prove_image" :src="$img_base_url(info.detail.cf_images)" mode=""></image>
					<image class="prove_image" :src="$img_base_url(info.detail.yp_images)" mode=""></image>
				</view>
			</view>

			<view class="order_item_box">
				<view class="flex_ac_jsb service_item">
					<view class="service_item_name">订单编号</view>
					<view class="service_item_price">
						{{ info.orderId }}
						<text style="margin: 0 8rpx">|</text>
						<text @click="clickCopy(info.orderId)">复制</text>
					</view>
				</view>
				<view class="flex_ac_jsb service_item">
					<view class="service_item_name">下单时间</view>
					<view class="service_item_price">
						{{ new Date(info.createtime * 1000).toLocaleString().replace(/\//g, '-').replace(/:/g, ':') }}
					</view>
				</view>
				<view class="flex_ac_jsb service_item" v-if="info.status > 0">
					<view class="service_item_name">支付方式</view>
					<view class="service_item_price">{{
            info.paytype == 4 ? "余额支付" : info.paytype == 0 ? "微信支付" : ""
          }}</view>
				</view>
				<view class="flex_ac_jsb service_item">
					<view class="service_item_name">付款时间</view>
					<view class="service_item_price">
						{{ new Date(info.paytime * 1000).toLocaleString().replace(/\//g, '-').replace(/:/g, ':') }}
					</view>
				</view>
				<view class="flex_ac_jsb service_item">
					<view class="service_item_name">订单留言</view>
					<view class="service_item_price order_remark">
						{{ info.memo }}
					</view>
				</view>
			</view>

			<!-- 已取消 -->
			<view class="item_btn_box" v-if="info.status == '-1' && info.is_service == 0">
				<view class="item_btn item_btn1" @click.stop="delOrder(info.id)">删除</view>
				<view class="item_btn item_btn2" @click.stop="toReserve(info.goods_id)">再次预约</view>
			</view>
			<!-- 待支付 -->
			<view class="item_btn_box" v-if="info.status == '0' && info.is_service == 0">
				<view class="item_btn item_btn1" @click="cancelOrder(1)">取消预约</view>
				<view class="item_btn item_btn2" style="width: 215rpx">去支付
					{{
            ($dayjs.duration(timeoutStr, "s").hours() > 9
              ? $dayjs.duration(timeoutStr, "s").hours()
              : "0" + $dayjs.duration(timeoutStr, "s").hours()) +
            ":" +
            ($dayjs.duration(timeoutStr, "s").minutes() > 9
              ? $dayjs.duration(timeoutStr, "s").minutes()
              : "0" + $dayjs.duration(timeoutStr, "s").minutes()) +
            ":" +
            ($dayjs.duration(timeoutStr, "s").seconds() > 9
              ? $dayjs.duration(timeoutStr, "s").seconds()
              : "0" + $dayjs.duration(timeoutStr, "s").seconds())
          }}
				</view>
			</view>
			<!-- 待接单 -->
			<view class="item_btn_box" v-if="info.status == '1' && info.is_service == 0">
				<view class="item_btn item_btn2" @click="cancelOrder(2)">申请退款</view>
			</view>
			<!-- 待服务 未到达 -->
			<view class="item_btn_box" v-if="
          (info.status == '2' || info.status == '3') && info.is_service == 0
        ">
				<view class="item_btn item_btn1" @click.stop="delOrder(info.id)">删除</view>
				<view class="item_btn item_btn2" @click.stop="toReserve(info.goods_id)">再次预约</view>
			</view>
			<!-- 待服务 已到达 -->
			<view class="item_btn_box" v-if="info.status == '4' && info.is_service == 0">
				<view class="item_btn item_btn1" @click="cancelOrder(2)">申请退款</view>
				<view class="item_btn item_btn2">确认开始服务</view>
			</view>
			<!-- 服务中 -->
			<view class="item_btn_box" v-if="info.status == '5' && info.is_service == 0">
				<view class="item_btn item_btn2">确认完成</view>
			</view>
			<!-- 已完成 待评价 -->
			<view class="item_btn_box" v-if="info.status == '6' && info.is_service == 0">
				<view class="item_btn item_btn1" @click="toMark">去评价</view>
				<view class="item_btn item_btn2" @click.stop="toReserve(info.goods_id)">再次预约</view>
			</view>
			<!-- 已完成 待评价 -->
			<view class="item_btn_box" v-if="info.status == '7' && info.is_service == 0">
				<view class="item_btn item_btn1" @click.stop="delOrder(info.id)">删除订单</view>
				<view class="item_btn item_btn2" @click.stop="toReserve(info.goods_id)">再次预约</view>
			</view>
			<!-- 申请退款 -->
			<view class="item_btn_box" v-if="info.is_service == 1">
				<view class="item_btn item_btn1">修改申请</view>
				<view class="item_btn item_btn2" @click="cancelRefund">撤销申请</view>
			</view>
			<!-- 拒绝退款 -->
			<view class="item_btn_box" v-if="info.is_service == -1">
				<view class="item_btn item_btn1" @click="cancelRefund">撤销申请</view>
				<view class="item_btn item_btn2">修改申请</view>
			</view>
			<!-- 退款成功 -->
			<view class="item_btn_box" v-if="info.is_service == 2">
				<view class="item_btn item_btn1" @click.stop="delOrder(info.id)">删除</view>
				<view class="item_btn item_btn2" @click.stop="toReserve(info.goods_id)">再次预约</view>
			</view>

			<!-- <view class="item_btn_box">
				<view class="item_btn item_btn1">取消预约</view>
				<view class="item_btn item_btn1">删除</view>
				<view class="item_btn item_btn2">撤销申请</view>
			</view> -->
		</view>

		<!-- 取消预约弹窗 -->
		<cancelPopupVue :title="cancelTitle" :type="cancelType" ref="cancelPopupRef" />
		<!-- 支付弹窗 -->
		<payPopupVue ref="payPopupRef" />
		<!-- 催单成功弹窗 -->
		<cuiOrderPopupVue ref="cuiOrderPopupRef" />
	</view>
</template>

<script>
	import {
		getCopy
	} from "@/utils/uni_api.js";
	import {
		serviceOrderInfo,
		cancelOrder,
		refundorder,
		cancelRefund,
	} from "@/utils/api/serviceApi.js";
	import {
		delOrder
	} from "@/utils/api/mallApi.js";
	import cancelPopupVue from "../../components/cancel-popup/cancel-popup.vue";
	import payPopupVue from "@/components/pay-popup/pay-popup.vue";
	import cuiOrderPopupVue from "../../components/cui-order-popup/cui-order-popup.vue";
	import statusDomVue from "./components/status_dom.vue";
	import dayjs from 'dayjs';
	const FormData = require("@/utils/formdata/index.js");
	export default {
		components: {
			cancelPopupVue,
			payPopupVue,
			cuiOrderPopupVue,
			statusDomVue,
		},
		onLoad(options) {
			this.order_id = options.id;
			// 取消弹窗
			// this.$refs.cancelPopupRef.open()
			// 支付弹窗
			// this.$refs.payPopupRef.open()
			// 催单成功
			// this.$refs.cuiOrderPopupRef.open()
		},
		onShow() {
			this.getDetail();
		},
		data() {
			return {
				$dayjs: dayjs,
				curStep: 3,
				order_id: "",
				stepList: [{
						name: "提交申请",
						status: 1,
					},
					{
						name: "平台处理",
						status: 2,
					},
					{
						name: "平台退款",
						status: 3,
					},
					{
						name: "退款成功",
						status: 4,
					},
				],
				stepList2: [{
						name: "同意退款",
						status: 0,
					},
					{
						name: "银行受理",
						status: 1,
					},
					{
						name: "退款到账",
						status: 3,
					},
				],
				info: {},
				timeoutStr: 0,
				cancelType: 1,
				cancelTitle: "选择取消原因",

				return_info: {},
			};
		},

		computed: {
			timeOut() {
				let setTime = setInterval(() => {
					if (this.info.sy_time > 0) {
						this.info.sy_time--;
						this.timeoutStr = this.info.sy_time;
					} else {
						this.timeoutStr = 0;
					}
				}, 1000);
			},
		},
		methods: {
			timejson() {
				let obj = JSON.parse(this.info.detail.service_time_json);
				let data = obj.type == 1 ? "本周" : "本月";
				let weeks = "";
				obj.data.forEach((e) => {
					weeks = weeks + e.day + ",";
				});
				weeks += obj.data[0].time;
				data = data + " " + weeks;
				return data;
			},

			getDetail() {
				uni.showLoading({
					title: "加载中...",
				});
				serviceOrderInfo({
					id: this.order_id
				}).then((res) => {
					uni.hideLoading();
					this.info = res.data;
					if (res.data.is_service != 0) {
						this.refundorder();
					}
				});
			},

			// 去评价
			toMark() {
				uni.navigateTo({
					url: `/pagesOrder/pages/orderMark/orderMark?id=${this.order_id}&name=${
          this.info.detail.name
        }&orderId=${this.info.orderId}&skill=${JSON.stringify(
          this.info.skillInfo
        )}`,
				});
			},

			// 撤销售后申请
			cancelRefund() {
				uni.showLoading({
					title: "加载中...",
				});
				cancelRefund({
					order_id: this.order_id
				}).then((res) => {
					uni.hideLoading();
					if (res.code == 1) {
						uni.showToast({
							title: "撤销成功",
							icon: "none",
						});
						setTimeout(() => {
							this.getDetail();
						}, 1000);
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none",
						});
					}
				});
			},

			// 退款信息refundorder
			refundorder() {
				let formData = new FormData();
				formData.append("id", this.order_id);
				refundorder(formData.getData()).then((res) => {
					this.return_info = res.data;
				});
			},

			// 取消订单
			cancelOrder(type) {
				this.cancelType = type;
				if (type == 1) {
					// this.cancelTitle = '选择取消原因'
					// this.$refs.cancelPopupRef.open()
					uni.showLoading();
					cancelOrder({
						order_id: this.order_id
					}).then((res) => {
						uni.hideLoading();
						if (res.code == 1) {
							uni.showToast({
								title: "取消成功",
								icon: "none",
							});
							let t = setTimeout(() => {
								uni.navigateBack();
								clearTimeout(t);
							}, 1000);
						}
					});
				} else {
					let obj = JSON.stringify(this.info);
					uni.navigateTo({
						url: `/pagesOrder/pages/returnOrder/returnOrder?info=${obj}`,
					});
				}
			},

			clickCopy(text) {
				getCopy(text);
			},
			// 再次预约
			toReserve(id) {
				console.log(id);
				uni.navigateTo({
					// url:`/pagesCourse/reserve/reserve?id=${id}`
					url: "/pagesService/serviceDetail/serviceDetail?id=" + id,
				});
			},
			// 删除订单
			delOrder(id) {
				console.log(id);
				uni.showModal({
					title: "提示",
					content: "是否确认删除订单",
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: "删除中...",
							});
							delOrder({
								id,
							}).then((res) => {
								uni.hideLoading();
								if (res.code == 1) {
									uni.showToast({
										title: "删除成功",
										icon: "none",
									});
									this.getDetail();
								}
								if (res.code == 0) {
									uni.showToast({
										title: res.msg,
										icon: "none",
									});
								}
							});
						}
					},
				});
			},
		},
	};
</script>

<style scoped lang="scss">
	@import url("../../css/orderDetail.scss");
</style>